<template>
  <div class="single-row-goods">
    <ul :class="getBox" >
      <li :class="getItem" v-for="(goods,index) in tplItemData.goodslist" :key="index">
        <a class="goodsimg" href="javascript:;" @click="openLink(goods.link)">
          <img
            :src="goods.is_compress == 1 ?`${goods.pic}480x480`:goods.pic"
            alt
          />
          <!-- 已售罄 -->
          <b v-if="goods.is_sell_out == 1" class="sold-out">已售罄</b>
        </a>
        <div class="goods-info">
          <a  href="javascript:;" @click="openLink(goods.link)"
              :class="['title','title'+tplItemData.layoutstyles,tplItemData.titleLine==1?'multiLine':'']" 
              v-if="tplItemData.showName == 1 ||tplItemData.showName==true">     
              <span class="seckill" v-if="recoGoods">推荐</span>
              <span class="seckill" v-if="goods.is_self_support == 1">自营</span>
            {{goods.title}}
          </a>
          <div class="goods-tips">
            <span class="seckill" v-if="goods.is_miao && goods.is_miao==1">{{goods.actives_title}}</span>
            <span class="seckill" v-else-if="goods.is_bargin && goods.is_bargin == 1">砍价</span>
            <span class="seckill" v-else-if="goods.is_cycle && goods.is_cycle == 1 ">周期购</span>
            <span class="seckill" v-else-if="goods.is_crowd && goods.is_crowd == 1">{{goods.label}}</span>
            <span class="seckill" v-else-if="goods.is_group_shopping && goods.is_group_shopping == 1">团购</span>
            <span class="seckill" v-else-if="goods.discount && goods.discount !=10 && goods.rank_price ==null">
              <!-- {{goods.discount}}折 -->
              <span v-if="goods.discount_sta==1">限时 ¥{{goods.discount}}</span>
              <span v-else>{{ goods.discount }}折</span>
            </span>
            <span class="seckill" v-else-if="goods.is_auction && goods.is_auction == 1">拍卖</span>
            <span class="seckill" v-else-if="goods.is_bmd==1">多买优惠</span>
            <span class="seckill greencol" v-if="goods.is_presale == 1">预售</span>
            <span class="seckill greencol" v-if="goods.is_time_purchase == 1">限时购</span>
          </div>
          <div class="goods-labels" v-if="goods.item_labels && goods.item_labels.length>0"><span>{{goods.item_labels}}</span></div>
          <!-- 样式A,C,D,E -->
          <p :class="['pic_box','pic_box'+tplItemData.layoutstyles]" v-if="tplItemData.showPrice && (tplItemData.layoutstyles == 1 || tplItemData.layoutstyles == 3 || tplItemData.layoutstyles == 4 || tplItemData.layoutstyles == 5)">
            <span :class="['goods-pirce', tplItemData.priceBold && tplItemData.priceBold == 0?'fwt_normal':'']" v-html="scaleGoodsPriceFn(goods.price)"></span>
            <span class="point" v-if="goods.buy_need_points !=0">
                <i class="plus">+</i>
                <i class="num">{{goods.buy_need_points}}</i>
                <i class="name">{{tplItemData.point_name}}</i>
            </span>
            <s class="original-price" v-if="displayOriginalPrice==1 &&  goods.original_price">&yen;{{goods.original_price}}</s>
            <em class="selled-num" v-if="goods.sale_num !== false">已售{{goods.sale_num}}件</em>
          </p>
          <!-- 样式B -->
          <p :class="['pic_box','pic_box'+tplItemData.layoutstyles]" v-if="tplItemData.showPrice && tplItemData.layoutstyles == 2">
            <span :class="['goods-pirce', tplItemData.priceBold && tplItemData.priceBold == 0?'fwt_normal':'']" v-html="scaleGoodsPriceFn(goods.price)"></span>
            <s class="original-price" v-if="displayOriginalPrice==1 && goods.original_price">&yen;{{goods.original_price}}</s>
            <em class="selled-num" v-if="goods.sale_num !== false">已售{{goods.sale_num}}件</em>
          </p>

          <!-- 样式F -->
          <p class="pic_box pic_box6" v-if="tplItemData.showPrice && tplItemData.layoutstyles == 6">
            <span class="original-price" v-if="displayOriginalPrice==1 && goods.original_price"><s>&yen;{{goods.original_price}}</s>&nbsp;/</span>
            <span :class="['goods-pirce', tplItemData.priceBold && tplItemData.priceBold == 0?'fwt_normal':'']" v-html="scaleGoodsPriceFn(goods.price)"></span>
            <span class="point" v-if="goods.buy_need_points !=0">
                <i class="plus">+</i>
                <i class="num">{{goods.buy_need_points}}</i>
                <i class="name">{{tplItemData.point_name}}</i>
            </span>
          </p>
          <!-- 加入购物车按钮 -->
          <!-- 样式A -->
          <a v-if="tplItemData.layoutstyles == 1 || tplItemData.layoutstyles == 2 || tplItemData.layoutstyles == 4" :class="['addcart', 'addcartstyles'+tplItemData.layoutstyles]">
            <i class="shop-car" v-if="goods.is_try==1 || goods.is_miao==1 || goods.is_bargin==1 || goods.is_crowd==1 || goods.is_limit_discount==1 || goods.is_group_shopping==1 || goods.is_auction==1 || goods.num<=0" @click="openLink(goods.link)"></i>
            <i @click="handleOpenSkuDialog(goods)"></i>
          </a>
          <!-- 样式C -->
          <a v-if="tplItemData.layoutstyles == 3" class="addcart addcartstyles3 " href="javascript:;" @click="openLink(goods.link)">立即购买</a>
          <!-- 样式F -->
          <a v-if="tplItemData.layoutstyles == 6" class="addcart addcartstyles6 " href="javascript:;" @click="openLink(goods.link)">去购买</a>
        </div>
        <!-- 商品分组角标 -->
        <div class="pic-tips" v-if="itemPic">
          <img :src="itemPic" alt="">
        </div>

        <!-- 角标 -->
        <div class="corner-mark" v-if="tplItemData.cornerMark && tplItemData.cornerMark!=1">
          <img v-if="tplItemData.cornerMark==2" src="https://img.wifenxiao.com/h5-wfx/images/diy/goods/xinpin.png"/>
          <img v-if="tplItemData.cornerMark==3" src="https://img.wifenxiao.com/h5-wfx/images/diy/goods/remai.png"/>
          <img v-if="tplItemData.cornerMark==4" src="https://img.wifenxiao.com/h5-wfx/images/diy/goods/new.png"/>
          <img v-if="tplItemData.cornerMark==5" src="https://img.wifenxiao.com/h5-wfx/images/diy/goods/hot.png"/>
        </div>
      </li>
    </ul>
    <!--sku弹层-->
    <sku-dialog :visible.sync="skuDialogVisible" :itemId="itemId"></sku-dialog>
  </div>
</template>

<script>
import skuDialog from '@/views/item/components/skuDialog'
import { scaleGoodsPrice } from '@/utils/index'
import { mapGetters } from 'vuex'
import { openPage } from '@/utils/utils'
import Vue from 'vue'

export default Vue.extend({
  components: {
    skuDialog
  },
  props: {
    tplItemData: {
      type: Object,
      default() {
        return {}
      }
    },
    recoGoods: {
      type: Boolean,
      default: false
    },
    itemPic: {
      tpye: String,
      default: ''
    }
  },
  data() {
    return {
      skuDialogVisible: false,
      itemId: ''
    }
  },
  computed: {
    ...mapGetters(['displayOriginalPrice']),
    getBox: {
      get() {
        if (this.tplItemData.layoutstyles == 1 || this.tplItemData.layoutstyles == 3 || this.tplItemData.layoutstyles == 6) {
          return 'big-goods-box big-goods-box' + this.tplItemData.layoutstyles
        } else if (this.tplItemData.layoutstyles == 2) {
          if (!this.tplItemData.isBorderRadius || this.tplItemData.isBorderRadius == 1) {
            return 'borderRadius around-goods-box around-goods-box' + this.tplItemData.layoutstyles
          } else {
            return 'around-goods-box around-goods-box' + this.tplItemData.layoutstyles
          }
        } else {
          return 'around-goods-box around-goods-box' + this.tplItemData.layoutstyles
        }
      }
    },
    getItem: {
      get() {
        if (this.tplItemData.layoutstyles == 1 || this.tplItemData.layoutstyles == 3 || this.tplItemData.layoutstyles == 6) {
          return 'big-goods-item big-goods-item' + this.tplItemData.layoutstyles
        } else {
          return 'around-goods-item around-goods-item' + this.tplItemData.layoutstyles
        }
      }
    }
  },
  methods: {
    openLink(link){
      openPage(link)
    },
    /**
       * 商品价格 整数放大
       */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },
    /**
       * 打开SKU弹窗
       */
    handleOpenSkuDialog(data) {
      const buy_need_fans = this.$store.getters.wxConfig.buy_need_fans
      const that = this
      if (buy_need_fans == 1) {
        that.$isFans(() => {
          this.$Error('请先等待商家绑定公众号')
          return false
        }, () => {
          that.$refs.shopCode.dialogVisible = true
          return false
        }, () => {
          // 打开sku弹窗
          that.skuDialogVisible = true
          that.itemId = Number(data.item_id)
        })
      } else {
        // 打开sku弹窗
        that.skuDialogVisible = true
        that.itemId = Number(data.item_id)
      }
    }
  }
})
</script>

<style lang="scss">
.pic_box4 {
  .price-scale {
    color: #fa6a00;
  }
}
@import "src/styles/mixin";
.single-row-goods{
  a{
    display: block;
  }
  // 图片样式
  .goodsimg{
    position: relative;
    img{
      width: 100%;
      display: block;     
    }
    .sold-out{
      position:absolute;
      top: 20px;
      left: -46px;
      width:180px;
      height:50px;
      line-height:50px;
      transform:rotate(-45deg);
      font-size:24px;
      text-align:center;
      color:#fff;
      background:#000;
      opacity: 0.5;
    }
  }
  // 商品信息
  .goods-info{
    position: relative;
    .title{
      .seckill{
        display: inline-block;
        @include gradient(left,rgba(255,42,64,1),rgba(254,60,112,1));
        padding: 0 15px;
        margin-right: 6px 3px;
        font-size: 20px;
        border-radius: 17px;
        line-height: 34px;
        color: #fff;
      }
      @include lineClamp(26px,38px,1);
      &.multiLine{
        @include lineClamp(26px,38px,2);
      }
    }
    .pic_box{
      .original-price,.selled-num{
        color: #999999;
        font-size: 22px;
        margin-left: 20px;
      }
      .point{
        display: inline-block;
        border:1px solid #F20B22;
        margin-left: 6px;
        padding: 0 4px;
        border-radius: 4px;
        font-size: 20px;
        line-height: 30px;
        height: 30px;
        color: #F20B22;
      }
    }
    .addcart{
      i{
        display: block;
        width: 100%;
        height: 100%;
      }
      &.addcartstyles1,&.addcartstyles2{
        width: 50px;
        height: 50px;
        background: url(https://img.wifenxiao.com/h5-wfx/images/item/list/cart.png) center/cover no-repeat;
      }
      &.addcartstyles4 {
        width: 66px;
        height: 66px;
        position: absolute;
        top: inherit;
        border-radius: 50%;
        bottom: 0;
        background: #f5f5f5 url(https://img.wifenxiao.com/h5-wfx/images/item/list/icon_addcart04.png) no-repeat;
        background-size: 34px 34px;
        background-position: 16px 16px;
      }
      &.addcartstyles3,
      &.addcartstyles6{
        border-radius: 24px;
        @include gradient(left,rgba(233,1,4,1),rgba(254,27,73,1));
        color: #fff;
        padding: 0 12px;
        font-size: 24px;
        height: 48px;
        line-height: 48px;
        text-align: center;
      }
    }
  }
}
.big-goods-item{
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  &:last-child{
    margin-bottom: 0;
  } 
  .goods-info{
    padding: 20px;
    position: relative;
    .pic_box{
      line-height: 50px;
      &.pic_box6{
        .original-price,.selled-num{
          margin-left: 0;
        }
      } 
    }
    .addcart{
      position: absolute;
      right: 20px;
      bottom: 20px;
    }
  }
  
}
.around-goods-item{
  display: flex;
  background: #fff;
  &.around-goods-item5{
    border: 1px solid #eee;
    margin-bottom: 10px;
  }
  &.around-goods-item4{
    .goodsimg{
      padding: 20px;
      img{
        width: 200px;
        height: 200px;
        border-radius:12px ;
      }
    }
    .goods-info{
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      padding:20px 0;
      border-bottom:1px solid #ededed ;
    }
  }
  .goodsimg{
    width: 200px;
    height: 200px;
    overflow: hidden;
  }
  .goods-info{
    flex: 1;
    padding:10px 0 20px 10px;
    .title{
      &.title2,
      &.title5{
        height: 76px;
      }
    }
    .pic_box{
      line-height: 50px;
      &.pic_box2{
        overflow: hidden;
        .original-price,.selled-num{
          margin-left: 0;
        }
        .goods-pirce{
          display: block;
          float: left;
        }
        .selled-num{
          display: block;
          float: right;
        }
      }
      &.pic_box5{
        margin-top: 30px;
      }
      &.pic_box4 {
        .goods-pirce {
          display: block;
        }
      }
    }
    .addcart{
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  
}
.around-goods-box2{
  padding-left:20px ;
  background: #fff;
  .around-goods-item2{
    padding-top: 20px;
    .goodsimg{
      overflow: hidden;
      border-radius: 12px;
      margin-right: 20px;
    }
    .goods-info{
      padding: 0 20px 20px 0;
      border-bottom: 1px solid #EEEEEE;
      height: 200px;
      position: relative;
      .pic_box2{
        width: calc(100% - 20px);
        position: absolute;
        bottom: 20px;
      }
    }
  }
  &.borderRadius{
    border-radius: 20px;
  }
  
}
</style>